<template>
  <div class="mine">
    <el-backtop :bottom="100" :visibility-height="10"> </el-backtop>
    <div class="header">
      <img
        class="homelogo"
        src="../assets/img/simtoplogo.png"
        @click="backToHome()"
      />
      <div class="firstindex">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#00000000"
          text-color="#fff"
          active-text-color="#fff"
        >
          <el-menu-item @click="backToHome()">
            <span style="font-size:0.17rem">首页</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="me">
        <el-dropdown placement="bottom-start" @command="myoperation">
          <span class="el-dropdown-link">
            {{ this.userInfo.username
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a" icon="el-icon-user"
              >个人中心</el-dropdown-item
            >
            <el-dropdown-item
              command="b"
              icon="el-icon-setting"
              v-show="isadmin"
              >管理中心</el-dropdown-item
            >
            <el-dropdown-item command="c" icon="el-icon-tickets"
              >帮助文档</el-dropdown-item
            >
            <el-dropdown-item command="d" icon="el-icon-switch-button"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="mycontent">
      <el-tabs tab-position="left" @tab-click="resetdownloadpage">
        <el-tab-pane label="个人信息"
          ><el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>个人信息</span>
            </div>
            <div class="text item">用户ID：{{ this.userInfo.userId }}</div>
            <div class="text item">姓名：{{ this.userInfo.username }}</div>
            <div class="text item">用户名：{{ this.userInfo.loginName }}</div>
            <div class="text item">部门：{{ this.userInfo.depart }}</div>
          </el-card></el-tab-pane
        >
        <el-tab-pane label="下载记录">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>下载记录</span>
            </div>
            <el-table
              :data="
                downloadData.slice((currentPage1 - 1) * 14, currentPage1 * 14)
              "
              style="width: 100%"
              ><el-table-column prop="operateId" label="操作ID" width="120">
              </el-table-column>
              <el-table-column prop="operateUserId" label="用户ID" width="120">
              </el-table-column>
              <el-table-column prop="operateUsername" label="姓名" width="120">
              </el-table-column>
              <el-table-column prop="operateStyle" label="操作名称" width="120">
              </el-table-column>
              <el-table-column prop="operateInfo" label="资源名称">
              </el-table-column>
              <el-table-column prop="operateDate" label="操作时间" width="200">
              </el-table-column>
            </el-table>
            <el-pagination
              @current-change="handleCurrentChange1"
              :current-page="currentPage1"
              :page-size="14"
              layout="total, prev, pager, next, jumper"
              :total="this.downloadData.length"
            >
            </el-pagination>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="上传记录"
          ><el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>上传记录</span>
            </div>
            <el-table
              :data="
                uploadData.slice((currentPage2 - 1) * 14, currentPage2 * 14)
              "
              style="width: 100%"
            >
              <el-table-column prop="operateId" label="操作ID" width="120">
              </el-table-column>
              <el-table-column prop="operateUserId" label="用户ID" width="120">
              </el-table-column>
              <el-table-column prop="operateUsername" label="姓名" width="120">
              </el-table-column>
              <el-table-column prop="operateStyle" label="操作名称" width="120">
              </el-table-column>
              <el-table-column prop="operateInfo" label="资源名称">
              </el-table-column>
              <el-table-column prop="operateDate" label="操作时间" width="200">
              </el-table-column>
            </el-table>
            <el-pagination
              @current-change="handleCurrentChange2"
              :current-page="currentPage2"
              :page-size="14"
              layout="total, prev, pager, next, jumper"
              :total="this.uploadData.length"
            >
            </el-pagination>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="登录记录"
          ><el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>登录记录</span>
            </div>
            <el-table
              :data="
                loginData.slice((currentPage3 - 1) * 14, currentPage3 * 14)
              "
              style="width: 100%"
            >
              <el-table-column prop="operateId" label="操作ID">
              </el-table-column>
              <el-table-column prop="operateUserId" label="用户ID">
              </el-table-column>
              <el-table-column prop="operateUsername" label="姓名">
              </el-table-column>
              <el-table-column prop="operateStyle" label="操作名称">
              </el-table-column>
              <el-table-column prop="operateDate" label="操作时间">
              </el-table-column>
            </el-table>
            <el-pagination
              @current-change="handleCurrentChange3"
              :current-page="currentPage3"
              :page-size="14"
              layout="total, prev, pager, next, jumper"
              :total="this.loginData.length"
            >
            </el-pagination>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import UserApi from "../api/Userapi.js";

export default {
  data() {
    return {
      isadmin: false,
      activeIndex: "0",
      maxSize: 100000,
      userInfo: {
        password: "",
        loginAuthority: 1,
        loginName: "one",
        uploadAuthority: 0,
        downloadAuthority: 1,
        manageAuthority: 0,
        depart: "研发部",
        exp: 1482635727275,
        userId: 4,
        username: "未登录"
      },
      downloadData: [],
      uploadData: [],
      loginData: [],
      currentPage1: 1,
      currentPage2: 1,
      currentPage3: 1
    };
  },
  methods: {
    handleCurrentChange1(val) {
      this.currentPage1 = val;
    },
    handleCurrentChange2(val) {
      this.currentPage2 = val;
    },
    handleCurrentChange3(val) {
      this.currentPage3 = val;
    },
    backToHome() {
      this.$router.push({ name: "home" });
    },
    getUsersMsg() {
      //获取用户个人信息
      this.userInfo = this.$store.state.userInfo;
      window.console.log("个人信息", this.userInfo);
      if (this.userInfo.manageAuthority === 1) {
        this.isadmin = true;
      }
    },
    getOperate() {
      this.axios
        .get(UserApi.getOperate, {
          params: { pageNum: 1, pageSize: this.maxSize }
        })
        .then(res => {
          if (res.data.status == 0) {
            window.console.log("操作记录", res.data.data.list);
            var oplist = res.data.data.list;

            if (res.data.data.length !== 0) {
              //获取到的是所有操作记录，所以需要使用filter过滤分类
              this.downloadData = oplist.filter(function(x) {
                return x.operateStyle === "下载";
              });
              window.console.log("下载记录", this.downloadData);
              this.uploadData = oplist.filter(function(x) {
                return x.operateStyle === "上传";
              });
              window.console.log("上传记录", this.uploadData);
              this.loginData = oplist.filter(function(x) {
                return x.operateStyle === "登录";
              });
              window.console.log("登录记录", this.loginData);
            }
          } else {
            window.console.log("接口调用失败");
          }
        });
    },
    myoperation(e) {
      //点击右上角用户名点击事件
      if (e) {
      }
      switch (e) {
        case "a":
          this.$router.push({ name: "me" });
          break;
        case "b":
          if (this.userInfo.manageAuthority === 1) {
            this.$router.push({ name: "admin" });
          }
          break;
        case "c":
          window.location.href = "http://192.168.0.2/simtopmanagedoc";
          break;
        case "d":
          this.$store.commit("clearToken");
          this.$router.push({ name: "login" });
          sessionStorage.removeItem("store");
          break;
        default:
          break;
      }
    },
    resetdownloadpage(tab, event) {
      window.console.log(tab, event);
      this.currentPage1 = 1;
      this.currentPage2 = 1;
      this.currentPage3 = 1;
    }
  },
  mounted() {
    this.getUsersMsg();
    this.getOperate();
  }
};
</script>
<style lang="scss">
body {
  background-color: #f5f7f9;

  background-size: 100% 100%;
  width: 100%;
  position: relative;
}
#app {
  position: relative;
  width: 100%;
  background-color: #f5f7f9;
}
.mine {
  position: relative;
  width: 100%;
  background-color: #f5f7f9;
}
.header {
  position: relative;
  width: 100%;
  height: 1.2rem;
  background: url(../assets/img/header.png) no-repeat;
  background-size: 100% 100%;
}
.homelogo {
  position: absolute;
  display: block;
  width: 2.01rem;
  height: 0.35rem;
  left: 0.42rem;
  top: 0.43rem;
  cursor: pointer;
}
.firstindex {
  font-family: "PingFang";
  font-size: 0.18rem;
  position: relative;
  left: 3.11rem;
  min-width: 1rem;
  margin-right: 6.26rem;
  /* overflow: hidden; */
  top: 50%;
  transform: translateY(-50%);
}
.firstindex .el-menu.el-menu--horizontal {
  border-bottom: none !important;
}
.firstindex .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: rgba(0, 0, 0, 0) !important;
}
.me {
  position: absolute;
  width: 1.05rem;
  height: 0.5rem;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.me > .el-dropdown {
  font-size: 0.18rem;
  height: 0.5rem;
  line-height: 0.5rem;
  font-family: "PingFang";
  background: #00000000;
  color: #ffffff;
  right: 0;
  left: 0;
  width: 100%;
}
.mycontent {
  width: 15rem;
  min-height: 9rem;
  border-radius: 0.1rem;
  margin: 0 auto;
  margin-top: 0.3rem;
  transform: translateX(-0.8rem);
  padding-bottom: 0.3rem;
}
.el-tabs--left .el-tabs__header.is-left {
  font-family: "PingFang";
  background: #fff;
  float: left;
  box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
  margin-right: 0.1rem;
}
.el-tabs__item {
  font-size: 0.16rem !important;
}
.text {
  font-size: 0.14rem;
}

.item {
  margin-bottom: 0.18rem;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.el-tabs__content {
  min-height: 8.5rem;
}

.box-card {
  width: 100%;
  min-height: 8.5rem;
  font-family: "PingFang";
  box-shadow: 0 0.04rem 0.2rem 0 rgba(0, 0, 0, 0.2);
}
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  webkit-box-shadow: none;
  box-shadow: none;
}
.el-table .cell {
  font-size: 0.15rem;
  line-height: 0.23rem;
  padding-right: 0.1rem;
  font-family: "PingFang";
}
</style>
